/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="model-center-wrap">
        <div v-if="!projectName" class="project__warp">
            <div class="title">
                <lang>项目管理</lang>
            </div>
            <div class="sub-title">
                <lang>最近项目</lang>
            </div>
            <div class="project-list-container">
                <div class="add-project" @click="_addProject">
                    <i class="iconfont iconicon-test1 add-icon"></i>
                    <div class="add-label">
                        <lang>创建新项目</lang>
                    </div>
                </div>

                <div v-for="(item) in projectList"
                        :key="item.id"
                        class="project-items"
                        :codeStudioNum="`${ item.codeStudioNum }个项目`"
                        @click="_jumpProjectIndex(item)">
                    <div class="topRight-opr">
                        <i class="iconfont iconrename edit-icon" @click.stop="edit"></i>
                        <div class="opr-menu">
                            <div class="opr-menu-btn opr-menu-edit-btn"
                                 @click.stop="_editProject(item)">
                                <lang>编辑</lang>
                            </div>
                            <div class="opr-menu-btn opr-menu-del-btn"
                                 @click.stop="_deleteProject(item)">
                                <lang>删除</lang>
                            </div>
                        </div>
                    </div>

                    <div class="project-icon__wrap">
                        <img class="project-icon" src="/static/img/project-icon.png"/>
                    </div>
                    <div class="project-items__content">
                        <div class="project-name sfv-ellipsis"
                                :title="item.name">
                            {{item.name}}
                        </div>
                        <div class="project-desc sfv-ellipsis"
                                :title="item.description">
                            <lang>描述：{{ item.description || _('无')}}</lang>
                        </div>
                        <div class="project-time__warp">
                            <i class="iconfont icondengdaiyilaiwancheng time-icon"></i>
                            <span class="project-time">{{ item.updateTime }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else
             class="content-wrapper">
            <div class="content-container"
                    :class="{'content-container-flow':flowName}">
                <router-view />
                <!-- </keep-alive> -->
            </div>
        </div>
    </div>
</template>

<style lang="less">

.model-center-wrap {
    background-color: #ebedf0;
    width: 100%;
    height: 100%;
    padding: 24px 52px 16px 52px;
    position: relative;
    
    .project__warp {
        position: absolute;
        margin: 40px;
        color: #3D3D3D;
        .title {
            font-size: 30px;
            font-weight: 700;
            line-height: 40px;
            margin-bottom: 40px;
        }
        .sub-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 24px;
        }

        .project-list-container {
            display: flex;
            flex-wrap: wrap;

            .add-project {
                width: 220px;
                height: 270px;
                background-color: #2C2A2A;
                color: white;
                margin-right: 30px;
                cursor: pointer;

                .add-icon {
                    font-size: 35px;
                    margin: 100px 92px 87px 92px;
                    display: inline-block;
                }
                .add-label {
                    font-size: 16px;
                    text-align: center;
                }
            }
            
            .project-items {
                width: 220px;
                height: 270px;
                background-color: white;
                margin-right: 30px;
                margin-bottom: 20px;
                cursor: pointer;
                position: relative;
                .topRight-opr {
                    opacity: 0;
                    position: relative;
                    float: right;
                    margin-right: 15px;
                    margin-top: 11px;

                    .edit-icon {
                        color: white;
                    }
                    .opr-menu {
                        position: absolute;
                        left: 15px;
                        width: 79px;
                        height: 80px;
                        border-radius: 4px;
                        background: #FFFFFF;
                        color: #666;
                        box-shadow: 0 0 5px 4px rgba(0,0,0,0.06);
                        opacity: 0;
                        .opr-menu-btn {
                            cursor: pointer;
                            width: 79px;
                            height: 18px;
                            &:hover {
                                color: #000;
                            }
                        }
                        .opr-menu-edit-btn {
                            padding: 16px 33px 25px 22px;
                        }
                        .opr-menu-del-btn {
                            padding: 6px 33px 33px 22px;
                        }
                    }

                    &:hover {
                        .opr-menu {
                            opacity: 1;
                        }
                    }
                }

                .project-icon__wrap {
                    .project-icon {
                        display: inline-block;
                        margin: 48px 84px 38px 65px;
                    }
                }

                &__content {
                    margin-left: 24px;
                    .project-name {
                        color: #333333;
                        font-size: 14px;
                        font-weight: 600;
                    }
                    .project-desc {
                        font-size: 12px;
                        color: #D6D6D6;
                        margin: 17px 0;
                    }
                    .project-time__warp {
                        .time-icon {
                            color: #D0D0D0;
                            font-size: 13px;
                        }
                        .project-time {
                            color: #D6D6D6;
                            margin-left: 5px;
                        }
                    }
                }
            }

            .project-items:hover{

                &::before{
                    content:attr(codeStudioNum) " " url('/static/img/arrow.png');
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 220px;
                    height: 270px;
                    line-height: 270px;
                    background: rgba(0, 0, 0, 0.39);
                    z-index: 2;
                    color: white;
                    font-size: 16px;
                    text-align: center;
                }
                .topRight-opr {
                    opacity: 1;
                    z-index: 3;
                }
            }

        }

    }
}

.content-wrapper {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: auto;
    .content-container {
        height: 100%;
        &.content-container-flow {
            height:100%;
        }
    }

    .project-info {
        display: flex;
        .name {
            font-size: 12px;
            color: #A3A3A3;
        }
        .content {
            margin-right: 24px;
            display: flex;
        }
    }

}
</style>

<script>


import { setStorage, getStorage } from 'src/util/local_storage';
import urlAdapter from 'src/home/mod_common/url_adapter';
import store from 'src/vuex/store';
import addProjectForm from './components/label_form/add_project_form.vue';
import Bus from 'src/util/bus.js'

let userID = store.state.userId;

const PROJECT_URLS = {
    get: urlAdapter(`user/${userID}/project`),
    delete: urlAdapter('project'),
    post:urlAdapter(`user/${userID}/project`),
    update:urlAdapter('project')
};

export default {
    components: {
    },
    data() {
        return {
            searchParams: {
                keyword:''
            },
            projectList: [],
            createTime: ''
        }
    },

    computed :{
        projectName () {
            // return this.$route.query.name;
            return true;
        },
        flowName () {
            return this.$route.query.flow_name;
        },
        userId () {
            return this.$store.state.userId;
        },
        TopNavFlag () {

            // 不存在详情的场景
            let pathName = this.$route.name;
            return pathName.indexOf('detail') > 0;
        }
    },
    mounted () {
        this.createTime = getStorage('createTime');
        this.refreshProjectData();
        Bus.$on("refresh-project-list",() => {
            this.refreshProjectData();
        });
    },
    methods: {

        async refreshProjectData () {

            // 卡片搜索关键字
            let jsonData = await this.$ajax.get(PROJECT_URLS.get, this.searchParams);
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.projectList = data;
        },

        // 新增项目弹窗
        _createProjectFormWin () {
            this.projectFormWin = this.$modal(addProjectForm, {
                autoDestory: true
            });
        },
        _addProject () {
            this._createProjectFormWin();
            this.projectFormWin.open({
                reset: true,
                title: _('新增项目'),
                submit: () => {
                    let ajaxParams = this.projectFormWin.formRoot.getJsonValue();
                    this.ajaxSubmitProject(ajaxParams, this.projectFormWin);
                }
            });
        },
        _editProject (record) {
            this._createProjectFormWin();
            this.projectFormWin.formRoot.setJsonValue(record);
            this.projectFormWin.open({
                title: _('编辑项目'),
                data:{
                    isEdit:true
                },
                submit: () => {
                    let ajaxParams = this.projectFormWin.formRoot.getJsonValue();
                    this.ajaxSubmitProject(ajaxParams, this.projectFormWin, 'put', record);
                }
            });
        },

        // 新增/编辑算法的卡片信息
        async ajaxSubmitProject (params, formWin, fetch = 'post') {
            formWin.$mask();
            const ADD_PROJECT_URL = PROJECT_URLS.post;
            const EDIT_PROJECT_URL = `${PROJECT_URLS.update}/${params.id}`;
            const QUERY_URL = fetch === 'post' ? ADD_PROJECT_URL : EDIT_PROJECT_URL;
            let jsonData = await this.$ajax[fetch](QUERY_URL, params);
            formWin.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('保存失败'));
            };
            this.refreshProjectData();

            this.$ok(msg || _('保存成功'));
            formWin.hide();

            // 如果是增加项目，则跳转到AI FLOW页面。
            if (fetch === 'post') {
                let record = {
                    id:data.id,
                    name:data.name
                };
                this._jumpProjectIndex(record);
            }
        },
        

            // 删除项目
        _deleteProject (record) {
            let params = {
                id: record.id,
                name:record.name
            };
            this.$confirm({
                title: _('提示'),
                subTitle: _('确定要删除项目{0}', record.name),
                msg: _('删除项目后，该项目下的所有内容将会被删除'),
                autoClose: true,
                callback: (actionName) => {
                    if (actionName === 'submit') {
                        this.ajaxDeleteProject(params);
                    }
                }
            });
        },
        // 执行删除操作
        async ajaxDeleteProject (params) {
            this.$mask();
            let jsonData = await this.$ajax.delete(`${PROJECT_URLS.delete}/${params.id}`, params);
            this.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('删除失败'));
            }
            this.refreshProjectData();
            this.$ok(_('删除成功'));
        },

        _jumpProjectIndex (record) {
            this.createTime = record.createTime;
            setStorage('createTime', record.createTime);
            setStorage('projectName', record.name);
            setStorage('projectId', record.id);
            this.$router.push({
                path: '/project_manager/project_index/cloud_ide',
                query:{name:record.name, projectId:record.id}
            });
        },
        
        _edit() {
            // 编辑按钮不可点击进入详情
            return ;
        },
        _returnProject () {
            this.$router.push({
                path: '/project_manager'
            });
            this.refreshProjectData()
        }
    }
};
</script>
